<template>
  <div class="goods-container">
    <!-- 搜索区域 -->
    <div class="search-panel">
      <el-card shadow="always">
        <el-form :model="form" label-width="100px" class="search-form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="关键词">
                <el-input 
                  v-model="form.keyword" 
                  placeholder="请输入商品名称、SKU编码等"
                  clearable
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="分类名称">
                <el-input 
                  v-model="form.categoryName" 
                  placeholder="请输入分类名称"
                  clearable
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品编码">
                <el-input 
                  v-model="form.skuCode" 
                  placeholder="请输入SKU编码"
                  clearable
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="品牌名称">
                <el-input 
                  v-model="form.brandName" 
                  placeholder="请输入品牌名称"
                  clearable
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="search-buttons">
              <el-button 
                type="primary" 
                :icon="Search" 
                @click="searchGoods"
                :loading="loading"
                size="small"
              >
                搜索
              </el-button>
              <el-button 
                :icon="Refresh" 
                @click="resetSearch"
                size="small"
                style="margin-left: 10px"
              >
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <!-- 结果展示区域 -->
    <div class="result-panel">
      <el-card shadow="always" class="result-card">
        <div class="result-header">
          <span class="result-title">商品列表</span>
          <span class="result-count">共 {{ pagination.total }} 条记录</span>
        </div>
        
        <div v-loading="loading" class="table-container">
          <!-- 分类树形结构 -->
          <div class="category-tree">
            <div v-for="category in goodsData" :key="category.id" class="category-item">
              <!-- 分类标题行 - 可点击展开/折叠 -->
              <div 
                class="category-header" 
                @click="toggleCategory(category)"
              >
                <i 
                  class="el-icon-arrow-right category-arrow" 
                  :class="{ 'expanded': category.expanded }"
                ></i>
                <span class="category-name">{{ category.name }}</span>
                <span class="category-count">({{ category.spus?.length || 0 }}个SPU)</span>
              </div>
              
              <!-- SPU表格 - 折叠内容 -->
              <div 
                class="spu-table-container" 
                v-if="category.expanded && category.spus && category.spus.length"
              >
                <el-table 
                  :data="category.spus" 
                  border 
                  size="small"
                  class="spu-table"
                >
                  <el-table-column 
                    type="index" 
                    label="序号" 
                    width="60"
                    align="center"
                  ></el-table-column>
                  <el-table-column 
                    prop="title" 
                    label="SPU标题" 
                    min-width="180"
                  ></el-table-column>
                  <el-table-column 
                    prop="subTitle" 
                    label="副标题" 
                    min-width="150"
                  ></el-table-column>
                  <el-table-column 
                    prop="brandName" 
                    label="品牌" 
                    width="120"
                  ></el-table-column>
                  <el-table-column 
                    prop="supplierName" 
                    label="供应商" 
                    width="120"
                  ></el-table-column>
                  <el-table-column 
                    prop="fullCategoryPath" 
                    label="分类路径" 
                    min-width="200"
                  ></el-table-column>
                  <el-table-column 
                    label="SKU信息" 
                    min-width="300"
                  >
                    <template #default="{ row }">
                      <div class="sku-container">
                        <!-- SKU折叠按钮 -->
                        <div 
                          class="sku-header" 
                          @click="toggleSku(row)"
                        >
                          <i 
                            class="el-icon-arrow-right sku-arrow" 
                            :class="{ 'expanded': row.skuExpanded }"
                          ></i>
                          <span>SKU列表 ({{ row.skus?.length || 0 }})</span>
                        </div>
                        
                        <!-- SKU表格 -->
                        <div 
                          class="sku-table-container" 
                          v-if="row.skuExpanded && row.skus && row.skus.length"
                        >
                          <el-table 
                            :data="row.skus" 
                            border 
                            size="mini"
                            class="sku-table"
                          >
                            <el-table-column 
                              prop="code" 
                              label="SKU编码" 
                              width="120"
                            ></el-table-column>
                            <el-table-column 
                              prop="title" 
                              label="SKU标题" 
                              width="150"
                            ></el-table-column>
                            <el-table-column 
                              prop="spec" 
                              label="规格" 
                              width="100"
                            ></el-table-column>
                            <el-table-column 
                              prop="costPrice" 
                              label="成本价" 
                              width="90"
                              align="right"
                            ></el-table-column>
                            <el-table-column 
                              prop="salePrice" 
                              label="售价" 
                              width="90"
                              align="right"
                            ></el-table-column>
                            <el-table-column 
                              prop="unit" 
                              label="单位" 
                              width="80"
                            ></el-table-column>
                          </el-table>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              
              <!-- 无数据提示 -->
              <div 
                class="no-data" 
                v-if="category.expanded && (!category.spus || category.spus.length === 0)"
              >
                该分类下暂无商品数据
              </div>
            </div>
            
            <!-- 整体无数据提示 -->
            <div class="no-result" v-if="goodsData.length === 0 && !loading">
              <el-empty description="暂无符合条件的商品数据"></el-empty>
            </div>
          </div>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination-container" v-if="pagination.total > 0">
          <el-pagination
            v-model:current-page="pagination.pageNum"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            background
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import request from '@/utils/request'

// 表单数据
const form = ref({
  keyword: '',
  categoryName: '',
  skuCode: '',
  brandName: ''
})

// 分页数据
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

// 商品数据 - 增加expanded属性控制折叠状态
const goodsData = ref([])

// 加载状态
const loading = ref(false)

// 切换分类展开/折叠
const toggleCategory = (category) => {
  category.expanded = !category.expanded
}

// 切换SKU展开/折叠
const toggleSku = (spu) => {
  spu.skuExpanded = !spu.skuExpanded
}

// 搜索商品
const searchGoods = async () => {
  loading.value = true
  try {
    const response = await request({
      url: '/goods/search',
      method: 'post',
      data: {
        ...form.value,
        pageNum: pagination.value.pageNum,
        pageSize: pagination.value.pageSize
      }
    })
    
    // 为每个分类添加expanded属性，默认折叠
    const categories = response.data || []
    goodsData.value = categories.map(category => ({
      ...category,
      expanded: false,
      spus: (category.spus || []).map(spu => ({
        ...spu,
        skuExpanded: false
      }))
    }))
    
    pagination.value.total = response.total || 0
  } catch (error) {
    console.error('搜索失败:', error)
    goodsData.value = []
    pagination.value.total = 0
  } finally {
    loading.value = false
  }
}

// 重置搜索
const resetSearch = () => {
  form.value = {
    keyword: '',
    categoryName: '',
    skuCode: '',
    brandName: ''
  }
  pagination.value.pageNum = 1
  searchGoods()
}

// 处理分页变化
const handlePageChange = (page) => {
  pagination.value.pageNum = page
  searchGoods()
}

// 处理页面大小变化
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  pagination.value.pageNum = 1
  searchGoods()
}

// 初始化加载
onMounted(() => {
  searchGoods()
})
</script>

<style scoped>
.goods-container {
  padding: 15px;
  background-color: #f5f7fa;
}

/* 搜索区域样式 */
.search-panel {
  margin-bottom: 15px;
}

.search-form {
  margin: 0;
}

.search-buttons {
  text-align: right;
  padding-top: 5px;
}

/* 结果区域样式 */
.result-panel {
  margin-bottom: 15px;
}

.result-card {
  border-radius: 4px;
  overflow: hidden;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.result-title {
  font-weight: bold;
  color: #333;
}

.result-count {
  color: #666;
  font-size: 13px;
}

.table-container {
  padding: 15px;
}

/* 分类树形结构样式 */
.category-tree {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.category-item {
  border-bottom: 1px solid #e4e7ed;
}

.category-item:last-child {
  border-bottom: none;
}

/* 分类标题行样式 */
.category-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.2s;
}

.category-header:hover {
  background-color: #f0f0f0;
}

.category-arrow {
  margin-right: 8px;
  transition: transform 0.2s;
  color: #666;
}

.category-arrow.expanded {
  transform: rotate(90deg);
}

.category-name {
  font-weight: 500;
  color: #333;
}

.category-count {
  margin-left: 10px;
  color: #666;
  font-size: 13px;
}

/* SPU表格容器 */
.spu-table-container {
  background-color: #fff;
  border-top: 1px solid #e4e7ed;
}

.spu-table {
  margin: 0;
  border-radius: 0;
}

/* SKU信息区域样式 */
.sku-container {
  padding: 5px 0;
}

.sku-header {
  display: flex;
  align-items: center;
  padding: 5px 0;
  cursor: pointer;
  color: #409eff;
  font-size: 13px;
}

.sku-arrow {
  margin-right: 5px;
  transition: transform 0.2s;
  font-size: 12px;
}

.sku-arrow.expanded {
  transform: rotate(90deg);
}

.sku-table-container {
  margin-top: 5px;
  padding-left: 20px;
}

.sku-table {
  margin: 0;
  border-radius: 0;
}

/* 无数据样式 */
.no-data {
  padding: 20px;
  text-align: center;
  color: #999;
  background-color: #fff;
  border-top: 1px solid #e4e7ed;
}

.no-result {
  padding: 40px 0;
}

/* 分页样式 */
.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

/* Element UI 表格样式覆盖 */
::v-deep .el-table th {
  background-color: #f5f7fa !important;
  font-weight: 500 !important;
  color: #333 !important;
}

::v-deep .el-table td, 
::v-deep .el-table th {
  border-right: 1px solid #e4e7ed !important;
}

::v-deep .el-table tr td:last-child,
::v-deep .el-table tr th:last-child {
  border-right: none !important;
}

::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
  background-color: #e4e7ed !important;
}
</style>
